<template>
	<view class="login">
		<view class="background">
			<image src="../../static/playing/playground.jpg" mode="scaleToFill"></image>
		</view>
		<view class="pic">
			<image mode="widthFix" style="width: 100%;" src="../../static/wangyi.png"></image>
			<view></view>
		</view>
		<view class="content">
			<!--手机-->
			<view v-if="status==1" class="denglu">
				<view class="u-f-ac input">
					<text >账号</text>
					<input placeholder="电话" @input="handleInputHaoma"
					:value="inpValueHaoma"
					></input>
				</view>
				<view class="u-f-ac input">
					<text >密码</text>
					<input  placeholder="密码" :password="true" @input="handleInputPassword"
					:value="inpValuePassword"
					></input>
				</view>
			</view>
			<!--邮箱-->
			<view v-if="status==2" class="denglu">
				<view class="u-f-ac input">
					<text >账号</text>
					<input placeholder="邮箱" @input="handleInputHaoma"
					:value="inpValueHaoma"
					></input>
				</view>
				<view class="u-f-ac input">
					<text >密码</text>
					<input  placeholder="密码" :password="true" @input="handleInputPassword"
					:value="inpValuePassword"
					></input>
				</view>
			</view>
			<!--验证码-->
<!-- 			<view v-if="status==3" class="denglu">
				<view class="u-f-ac input">
					<text >账号</text>
					<input placeholder="号码" @input="handleInputHaoma"
					:value="inpValueHaoma"
					></input>
				</view>
				<view class="u-f-ac input">
					<text >密码</text>
					<input  placeholder="验证码" :password="true" @input="handleInputPassword"
					:value="yanzheng"
					></input>
				</view>
			</view> -->
			
			
			
			<view class="swith u-f-ajc"  @tap="swith">
				<text v-if="status==1">邮箱登录</text>
				<text v-if="status==2">手机号码登录</text>
				<!-- <text v-if="status==3">手机验证码登录</text> -->
				<view class="icon iconfont icon-jinru login-font-color"></view>
			</view>
			
<!-- 			<view v-if="status==3" class="login_tap">
				<button style="width: 30%;font-size: 28upx;" type="primary" @tap="sent">获取验证码</button>
				<button  style="width: 50%; margin-top: 30upx;" type="warn" @tap="handleSent" >登录</button>
			</view> -->
			<view  class="login_tap u-f-ac">
				<button  style="width: 50%;" type="warn" @tap="handelLogin" >登录</button>
			</view>	
			
			
			<view class="xieyi u-f-ajc">
				登录即代表您同意<view style="color: #007AFF;">《网易云用户协议》</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import otherLogin from './other-login.vue'
	import { requestHead } from '../../utils/request.js'
	export default {
		components:{
			otherLogin
		},
		data() {
			return {
				inpValueHaoma:'',
				inpValuePassword:'',
				status:1,
				yanzheng:''
			}
		},
		methods: {
			handleInputHaoma(e){
			  const {value}=e.detail;
			  this.inpValueHaoma=value;
			},
			handleInputPassword(e){
			  const {value}=e.detail;
			  this.inpValuePassword=value;
			},
			async handelLogin(){
				 const {inpValueHaoma}=this;
				 const {inpValuePassword}=this;
				 let that=this;
				 //手机登录
				 if(this.status==1){
					 let phone=this.phone(inpValueHaoma);
					 if(!phone){
						 return;
					 }
					var info=await this.request({url: this.bsurl+'login/cellphone?phone='+inpValueHaoma+'&password='+inpValuePassword,});   
				 }
				 //邮箱登录
				 else if(this.status==2){
					 const ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
					 if(!ePattern.test(inpValueHaoma)){
						uni-uni.showToast({
							title: '请输入正确的邮箱',
							icon:'none'
						});
						return;
					 }
					 
					 var info=await this.request({url: this.bsurl+'login?email='+inpValueHaoma+'&password='+inpValuePassword});	 	
				}
				if(info.code===502){
				   uni.showToast({
					 title: '密码错误',
					 icon: 'none',
					 success: (result) => {
						this.inpValuePassword=''; 
					 },
				   });   
				}
				else if(info.code==501){
					uni.showToast({
						 title: '账号不存在',
						 icon: 'none',
						 success: (result) => {
							this.inpValueHaoma='';
							this.inpValuePassword='';   
						 },
					});
				}
				else if(info.code==200){
					uni.showToast({
						title: '登录成功',
						icon: 'success',
						success: (result) => {
							const userinfo=info.profile;
							uni.setStorageSync('userinfo',userinfo);
							uni.switchTab({
								url: '../home/home',
							});          
						},
				  }); 
				}
			},
			swith(){
				this.status=this.status<2?this.status+=1:this.status=1;			
				this.inpValueHaoma='';
				this.inpValuePassword='';
			},
			//手机号码正确验证
			phone(phone){
				const mPattern = /^1[34578]\d{9}$/;
				//console.log(mPattern.test(inpValueHaoma));
				if(!mPattern.test(phone)){
					uni-uni.showToast({
						title: '请输入正确的电话号码',
						icon:'none'
					});
					this.inpValueHaoma='';
					this.inpValuePassword=''; 
					return false;
				}
				else{
					return true;
				}
			},
			//接口问题功能无法实现
/* 			async sent(){
				const {inpValueHaoma}=this;
				let phone=this.phone(inpValueHaoma);
				if(!phone){
					return;
				}
				var info=await this.request({url: this.bsurl+'captcha/sent?phone='+inpValueHaoma});
				console.log(info)
			},
			async handleSent(){
 				const {inpValueHaoma}=this;
				const {yanzheng}=this;
				var info=await this.request({url: this.bsurl+'captcha/sent?phone='+inpValueHaoma+'&captcha='+yanzheng});	 
				
			} */
		}
	}
</script>

<style lang="less" scoped>
	.login{
		.background{
			position: absolute;
			bottom:0;
			left: 0;
			right: 0;
			width: 750upx;
			height: 1400upx;
			overflow: hidden;
			image{
				width: 750upx;
				height: 1400upx;
			}
		}
		.pic{
			position: absolute;
			z-index: 1;
			top: 130upx;
			left: 50%;
			width: 150upx;
			transform: translateX(-50%);
		}
		.content{
			position: absolute;
			top: 250upx;
			left:0;
			right:0;
			padding: 50upx 50upx 50upx 50upx;
			.denglu{
				.input{
					margin: 10upx 10upx 20upx 10upx;
					text{
						flex: 2;
					}
					input{
						padding:0 10upx 0 10upx;
						flex: 15;
						height: 60upx;
						background: #FFFFFF;
						border-radius: 8upx;
					}
				}	
			}
			.swith{
				margin-top: 20upx;
				font-weight: bold;
			}
			.login_tap{
				margin-top: 50upx;
			} 
			.xieyi{
				color: #C0C0C0;
				margin-top: 30upx;
				font-weight: bold
			}
		}
	}

</style>
